<template>
  <div class="spot-main">
    <div class="left">
      <ImgPicker
        :smallImg="`.2969rem`"
        :iconPartWidth="`.1394rem`"
        :icon-height="`.0755rem`"
        :icon-width="`.0624rem`"
        :smallImgWidth="`.2969rem`"
        :img-arr="[
          publicUrl(`/images/Special1.png`),
          publicUrl(`/images/Special2.png`),
          publicUrl(`/images/Special3.png`),
          publicUrl(`/images/Special4.png`),
          publicUrl(`/images/Special5.png`),
          publicUrl(`/images/Special6.png`),
          publicUrl(`/images/Special1.png`),
          publicUrl(`/images/Special2.png`),
          publicUrl(`/images/Special3.png`),
          publicUrl(`/images/Special4.png`),
          publicUrl(`/images/Special5.png`),
          publicUrl(`/images/Special6.png`),
          publicUrl(`/images/Special1.png`),
          publicUrl(`/images/Special2.png`),
          publicUrl(`/images/Special3.png`),
          publicUrl(`/images/Special4.png`),
          publicUrl(`/images/Special5.png`),
          publicUrl(`/images/Special6.png`),
        ]"
        :img-height="`2.8906rem`"
      />
    </div>
    <div class="right">
      <div class="top">
        <div class="tag">30天热销</div>
        <div class="title overOneSpec">男士衬衣长袖衬衫男男士衬衣长袖衬衫</div>
      </div>

      <div class="second">
        <div class="part">
          <img
            :src="publicUrl(`/images/spot-masonry.png`)"
            v-for="index of 4"
          />
          <img
            :src="publicUrl(`/images/spot-masonr-black.png`)"
            v-for="index of 1"
          />
        </div>
        <div class="part">2000+条评价</div>
        <div class="part">90天内300+件成交</div>
      </div>

      <div class="third">
        <div class="third-left">价格起批量</div>
        <div class="third-right">
          <div class="third-right-part">
            <span>￥39.00</span>
            <span>1-99件</span>
          </div>
          <div class="third-right-part">
            <span>￥36.00</span>
            <span>100-499件</span>
          </div>
          <div class="third-right-part">
            <span>￥34.00</span>
            <span>≥500件</span>
          </div>
        </div>
      </div>

      <div class="four">
        <div class="four-left">优惠</div>
        <div class="four-right">
          <Select
            :options="[
              { label: `优惠300`, value: 1 },
              { label: `优惠500`, value: 2 },
            ]"
            :size="`.0833rem`"
            :searchable="true"
            :placeholder="`请选择优惠券`"
            label="label"
            :border="true"
            :reduce="(option) => option.value"
            :clearable="true"
            v-model:value="couponValue"
          />
        </div>
      </div>

      <div class="five">
        <div class="five-left left-text">服务</div>
        <div class="five-right">48小时发货·极速退款·材质保障</div>
      </div>

      <div class="six">
        <div class="six-left left-text">物流</div>
        <div class="six-right">
          <span class="text-blod">浙江省金华市</span>&nbsp;&nbsp;<span
            class="text-gray text-blod"
            >至</span
          >&nbsp;

          <div class="distpicker">
            <VDistpicker
              :province="select.province"
              :city="select.city"
              hide-area
              class="distpicker"
              @province="(event:any)=>onChange(event,'province')"
              @city="(event:any)=>onChange(event,'city')"
            />
          </div>
          <span class="text-blod"
            ><span class="text-gray-light font-light">&nbsp;|&nbsp;&nbsp;</span
            >运费:￥0起
            <span class="text-gray-light font-light">&nbsp;|&nbsp;</span>
            承诺付款后48小时内发货</span
          >
        </div>
      </div>

      <div class="dir"></div>

      <div class="senven">
        <div class="senven-left left-text">颜色</div>
        <div class="senven-right">
          <div
            :class="['senven-right-part', 'thumb']"
            :style="{
              border: `1px solid  ${index === specValue ? `red` : `#e5e7ed`}`,
            }"
            @click="() => (specValue = index)"
            v-for="(item, index) in dataSouce.spec"
          >
            <div class="senven-right-img"><img v-lazy="item.img" /></div>
            <div class="title">{{ item.title }}</div>
          </div>
        </div>
      </div>

      <div class="dir"></div>

      <div class="eight">
        <div class="eight-left left-text">尺码</div>

        <div class="eight-right">
          <div class="eight-line" v-for="(item,index) in sizeData" :style="{'border-bottom':index != sizeData.length - 1 ? `1px solid #e5e7ed`: 'none'}">
            <span class="title"> {{ item.title }}</span>
            <div class="center">
              <span class="text">{{  twoFixed(item.price) }}元</span>
              <span class="text">{{ item.stock }}件可售</span>
            </div>
            <div class="counter">
              <Counter
                :min="0"
                :max="item.stock"
                v-model:value="item.buyNum"
                :icon-size="`.18rem`"
              />
            </div>
          </div>
        </div>
      </div>



      <div class="buttons">
       <div class="button thumb">立即订购</div>
       <div class="button thumb">加采购车</div>
       <div class="small"><img class="thumb" v-debounce="()=>is_coll = !is_coll" :src="publicUrl( is_coll?`/images/collect.png` :`/images/collect-black.png`)" /><span>收藏(891)</span></div>
      </div>


    </div>

    
  </div>
  <GoodsComment />
</template>
<script setup lang="ts" name="">
import { publicUrl,twoFixed } from "@/utils/util";
import { ref, reactive, computed } from "vue";
import ImgPicker from "@/components/ImgPicker/index.vue";
import Select from "@/components/Select/index.vue";
import VDistpicker from "v-distpicker";
import Counter from "@/components/Counter/index.vue";
import GoodsComment from "@/components/GoodsComment/index.vue";
interface Size {
  title: string;
  price: number;
  stock: number;
  buyNum: number;
}

interface DataSouce {
  spec: Array<{
    img: string;
    title: string;
    size: Array<Size>;
  }>;
}

const couponValue = ref<number | undefined>(undefined);

const select = reactive<{
  province: string;
  city: string;
}>({ province: "", city: "" });

const onChange = (
  data: {
    value: string;
    code: string;
  },
  key: "province" | "city"
) => {
  select[key] = data.code === "" ? "" : data.value;
};

const dataSouce = ref<DataSouce>({
  spec: [
    {
      img: publicUrl(`/images/Special1.png`),
      title: `纯白色G2801`,
      size: [
        {
          title: `38（115斤以下)`,
          price: 39.0,
          stock: 989,
          buyNum: 0,
        },
        {
          title: `39（115-130斤)`,
          price: 39.0,
          stock: 989,
          buyNum: 0,
        },
        {
          title: `40（115斤以下)`,
          price: 39.0,
          stock: 989,
          buyNum: 0,
        }
      ],
    },
    {
      img: publicUrl(`/images/Special2.png`),
      title: `纯白色G2801`,
      size: [
        {
          title: `39（115-130斤)`,
          price: 39.0,
          stock: 989,
          buyNum: 0,
        },
      ],
    },
    {
      img: publicUrl(`/images/Special4.png`),
      title: `纯白色G2801`,
      size: [
        {
          title: `40（115斤以下)`,
          price: 39.0,
          stock: 989,
          buyNum: 0,
        },
      ],
    },
  ],
});


const sizeData = computed((): Array<Size> => {
  if (dataSouce.value.spec[specValue.value]) {
    return dataSouce.value.spec[specValue.value].size;
  } else {
    return [];
  }
});

const is_coll = ref<boolean>(false);

const specValue = ref<number>(0);
</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}
</style>
